<template>
  <div class="fish-card" @click="handleClick">
    <div class="fish-card-image">
      <img :src="fish.image" :alt="fish.name" />
      <div class="fish-card-bookmark" v-if="fish.isBookmarked">
        <i class="el-icon-star-on"></i>
      </div>
    </div>
    <div class="fish-card-content">
      <h3 class="fish-card-title">{{ fish.name }}</h3>
      <p class="fish-card-description">{{ fish.description }}</p>
      <div class="fish-card-tags">
        <span v-for="(tag, index) in fish.tags" :key="index" class="fish-card-tag">
          {{ tag }}
        </span>
      </div>
      <div class="fish-card-footer">
        <span class="fish-card-price">¥{{ fish.price }}</span>
        <el-button class="fish-card-button" type="primary" size="small" round>详情</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  interface FishProps {
    id: string;
    name: string;
    description: string;
    image: string;
    price: number;
    tags: string[];
    isBookmarked?: boolean;
  }

  const props = defineProps<{
    fish: FishProps;
  }>();

  const emit = defineEmits(['click']);

  const handleClick = () => {
    emit('click', props.fish);
  };
</script>

<style lang="less" scoped>
  .fish-card {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 10px 20px rgb(0 0 0 / 8%);
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgb(0 0 0 / 12%);
    }

    &-image {
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      &:hover img {
        transform: scale(1.05);
      }
    }

    &-bookmark {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgb(255 255 255 / 80%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #403a7a;
    }

    &-content {
      padding: 20px;
    }

    &-title {
      margin: 0 0 10px;
      font-size: 18px;
      font-weight: 600;
      color: #403a7a;
    }

    &-description {
      margin: 0 0 15px;
      font-size: 14px;
      color: #666;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    &-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 15px;
    }

    &-tag {
      padding: 4px 10px;
      border-radius: 15px;
      background-color: #e2f3fe;
      color: #403a7a;
      font-size: 12px;
      font-weight: 500;
    }

    &-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &-price {
      font-size: 18px;
      font-weight: 700;
      color: #403a7a;
    }

    &-button {
      background-color: #403a7a;
      border: none;

      &:hover,
      &:focus {
        background-color: darken(#403a7a, 10%);
      }
    }
  }
</style>
